<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<script type="text/javascript">

		</script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<script src="html5plus://ready"></script>
		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
	</head>
	<body>
		<div id="app">
			<van-nav-bar title="标题" left-text="返回" left-arrow>
				<van-icon name="search" slot="right" />
			</van-nav-bar>
			<van-tabbar v-model="active" @change="tabChange">
				<van-tabbar-item icon="home-o">首页</van-tabbar-item>
				<van-tabbar-item icon="search">搜索</van-tabbar-item>
				<van-tabbar-item icon="friends-o">朋友圈</van-tabbar-item>
				<van-tabbar-item icon="setting-o">设置</van-tabbar-item>
			</van-tabbar>
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					active: 0,
					views: [
						//name => webviewId
						{
							name: "home",
							url: "views/home.html"
						},
						{
							name: "search",
							url: "views/search.html"
						},
						{
							name: "friends",
							url: "views/friends.html"
						},
						{
							name: "setting",
							url: "views/setting.html"
						}
					]
				},
				created: function() {
					var _this = this
					document.addEventListener('plusready', function() {
						//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
						var currWebview = plus.webview.currentWebview();
						for (var i = 0; i < _this.views.length; i++) {
							var tempWebview = plus.webview.create(_this.views[i].url, _this.views[i].name, {
								top: "46px",
								bottom: "50px",
								zindex: 1
							})
							currWebview.append(tempWebview);
						}
						plus.webview.show(_this.views[_this.active].name)
					});
				},
				methods: {
					tabChange: function() {
						plus.webview.show(this.views[this.active].name);
					}
				}
			})
		</script>
	</body>
</html>
